<template>
	<view class="container">

		<view class="title">
			<slot name="title">
				{{title}}
			</slot>
		</view>

		<view class="nav-bar">
			<view class="text-box" @tap="back" v-if="isBack">
				<slot name="left"><text class="iconfont iconfanhui"></text> 返回</slot>

			</view>
			<view class="search-box">
				<slot name="content"><input class="input" type="text" :placeholder="searchPlacehold" confirm-type="search"></input></slot>

			</view>
			<view class="action-box">
				<slot name="right">
					<view class="search-icon iconfont iconsousuo" @tap="search" v-if="isSearch"></view>
					<view class="menu-icon iconfont iconcaidan" @tap="showMenu"></view>
				</slot>

			</view>
		</view>

		<!-- 以下是侧面滑出模态窗体-->

		<view class="cu-modal drawer-modal justify-end" :class="modalName=='menuModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog basis-lg" @tap.stop="" :class="['drawer']">
				<view class="cu-list menu text-left">
					<view class="cu-item" v-for="(item,index) in menuList" :key="index" @tap="handleMenuTap(item)">
						<view class="iconfont" :class="[item.iconClass]"></view>
						<view class="content">

							<view>{{item.titile}}</view>

						</view>
						<view class="iconfont iconyoujiantou"></view>
					</view>
				</view>
			</view>
		</view>


		<!-- 以下是从底部滑出模态窗体-->
		<view class="bottom-popup cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog">
				<view class="user-panel">
					<view class="title-bar">
						<view class="text">我的账号</view>
						<view class="iconfont iconguanbi" @tap="hideModal"></view>
					</view>
					<view class="form">

						<view class="form-inputs">
							<view class="item">
								<view class="title">账号：</view>
								<input class="input" placeholder="输入账号" v-model="user.account" disabled></input>
							</view>
							<view class="item">
								<view class="title">姓名：</view>
								<input class="input" placeholder="输入姓名" v-model="user.uname"></input>
							</view>
							<view class="item">
								<view class="title">所属部门：</view>
								<input class="input" placeholder="部门名称" v-model="user.deptName"></input>

							</view>
							<view class="item">
								<view class="title">身份证号：</view>
								<input class="input" placeholder="身份证号码" v-model="user.idno"></input>

							</view>
							<view class="item">
								<view class="title">联系电话：</view>
								<input class="input" placeholder="联系电话" v-model="user.phone"></input>

							</view>

							<view class="item btns">
								<button class="cu-btn md" @tap="updateUser">修改账户信息</button>
							</view>

							<view class="item">
								<view class="title">密码：</view>
								<input class="input" type="password" placeholder="" v-model="pwd"></input>

							</view>
							<view class="item">
								<view class="title">确认密码：</view>
								<input class="input" type="password" placeholder="" v-model="repwd"></input>

							</view>

							<view class="item btns">
								<button class="cu-btn md" @tap="resetPwd">重置密码</button>
							</view>
						</view>


					</view>


				</view>
			</view>


		</view>


		<!-- 扫描二维码弹出模态窗体-->
		<view class="qr-modal cu-modal" :class="modalName=='qrDlgModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar  justify-end">
					<view class="content">扫描结果信息</view>
					<view class="action" @tap="hideModal">
						<text class="iconfont iconguanbi"></text>
					</view>
				</view>
				<view class="form">
					<view class="item"><text class="text">设备ID:</text> <input class="input" type="text" v-model="qrResult.id"></view>
					<view class="item"><text class="text">设备IEMI:</text><input class="input" type="text" v-model="qrResult.imei"></view>
					<view class="status-item"><text :class="[qrResult.msgClass]">{{qrResult.msg}}</text></view>
				</view>
				<view class="cu-bar justify-end">
					<view class="action">
						<button class="cu-btn" @tap="hideModal">取消操作</button>
						<button class="cu-btn  line-grey margin-left" @tap="bindWell">绑定到井口</button>

					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	const app = getApp();
	export default {
		props: {
			title: String,
			isBack: {
				type: Boolean,
				default: true
			},
			isSearch: {
				type: Boolean,
				default: true
			},
			searchPlacehold: {
				type: String,
				default: "搜索井口"
			},
			menuData: {
				type: Array,
				default: function() {
					return [];
				}
			},
			menuFilter: Function


		},
		data() {
			return {
				modalName: null,
				menuList: this.menuData,

				user: {},
				pwd: '123456',
				repwd: '123456',
				qrResult: {
					id: '',
					imei: '',
					msg: '',
					msgClass: '',

				}

			}
		},
		onReady() {
			if (this.menuFilter) {
				this.menuList = this.menuData.filter(this.menuFilter)
			}

			this.user = app.globalData.currUser


		},
		methods: {

			back() {
				this.$emit('onback')
			},

			updateUser() {
				if (!this.validateInfo()) {
					return;
				}
				const server = this.$config.portalServer;
				const url = `${server}/user/updateInfo`;
				this.$http.post(url, this.user).then(res => {
					if (res.code === "200") {

						app.globalData.currUser = this.user;
						uni.setStorageSync("user", this.user)
						uni.showToast({
							title: "更新成功"
						})
					} else {
						uni.showToast({
							title: "更新失败"
						})
					}

				})

			},

			resetPwd() {
				if (!this.validatePwd()) {
					return;
				}
				const server = this.$config.portalServer;
				const url = `${server}/user/resetPwd`;

				this.$http.request(url, {
					password: this.pwd
				}, {
					method: 'POST',
					timeout: 3000,
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				}).then(res => {
					if (res.code === "200") {
						uni.showToast({
							title: "重置成功"
						})
					} else {
						console.log(res.code, res.msg)
						uni.showToast({
							title: "重置失败：" + res.msg
						})
					}
				})

			},



			search() {
				this.$emit('onsearch');
			},

			showMenu() {
				this.modalName = 'menuModal';

			},
			showQrModal() {
				this.modalName = 'qrDlgModal'
			},
			showBottomModal() {

				this.modalName = 'bottomModal';
			},

			hideModal() {
				this.modalName = null
			},
			bindWell() {
				this.hideModal();
				uni.reLaunch({
					url: '/pages/bind/bind'
				})
			},
			handleMenuTap(item) {

				if (item.key == 'user') {
					this.showBottomModal();
				}
				/* if (item.key == 'qr') {
					let self = this;
					uni.scanCode({
						success: function(res) {
							self.qrResult.id='283434304403'
							self.qrResult.imei='jk3l232323'
							self.qrResult.msg='扫描成功，确定后选择井口绑定'
							self.qrResult.msgClass='color-success'
							self.showQrModal();
						},
						fail: function(err) {
                            self.qrResult.id=''
							self.qrResult.imei=''
							self.qrResult.msg='扫描失败，可手工输入后选择绑定井口'
							self.qrResult.msgClass='color-fail'
							self.showQrModal();
						}
					});
				} */

				if (item.key == 'map' ||
					item.key == 'logout' ||
					item.key == 'list' ||
					item.key == 'qr' ) {

					this.hideModal();

					uni.reLaunch({
						url: item.param
					})
					this.$emit('ontapmenu', item);
				}

			},
			validateInfo() {

				if (!this.user.uname) {
					toast('姓名为空')
					return false;

				}

				if (this.user.uname.length > 20) {

					toast('姓名过长')
					return false;
				}
				if (!this.user.deptName) {
					toast('部门为空')
					return false;
				}

				if (this.user.deptName.length > 20) {

					toast('部门名称过长')
					return false;
				}

				if (!this.user.idno) {
					toast('身份证号为空')
					return false;
				}

				if (this.user.idno.length > 20) {

					toast('身份证号过长')
					return false;
				}


				if (!this.user.phone) {
					toast('电话为空');
					return false;
				}
				if (this.user.phone.length > 20) {

					toast('电话过长')
					return false;
				}

				return true;

			},
			validatePwd() {
				if (!this.pwd) {
					toast('密码为空');
					return false;
				}
				if (this.pwd.length > 20) {

					toast('密码过长')
					return false;
				}
				if (this.repwd !== this.pwd) {
					toast('密码不一致');
					return false;
				}
				return true;

			}

		}

	}
</script>

<style scoped lang="scss">
	/* 查询面板定义 */
	$qp-title-height:70upx;
	$qp-content-height:780upx;
	$qp-btns-height:100upx;

	.container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100vw;
		background-color: $color-bg-primary--light;
		font-size: 35upx;
		height: $nav-bar-height;


		.title {

			color: $color-text-white;
			flex: 10;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;

		}

		.nav-bar {
			flex: 7;
			display: flex;
			align-items: center;
			background-color: $color-bg-primary--light;

			color: $color-text-white;


			opacity: 0.9;
			width: 100%;

			.text-box {
				flex: 3;
				display: flex;
				justify-content: center;
				align-items: center;

			}

			.search-box {
				flex: 8;
				margin-left: 10upx;
				display: flex;
				justify-content: center;
				align-items: center;

				.input {
					font-size: 35upx;
					background-color: rgba(255, 255, 255, 0.7);
					padding-left: 20upx;
					height: 70upx !important;
					color: $color-text-grey--dark;
				}

			}

			.action-box {
				flex: 3;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.search-icon {
					font-size: 50upx;
				}

				.menu-icon {
					font-size: 50upx;

				}

			}

		}
	}

	.drawer {
		top: $nav-bar-height;
		height:calc(100vh - #{$nav-bar-height});
	}

	.cu-modal .cu-dialog {
		background-color: $color-bg-primary--light;
		opacity: 0.9;
	}

	.cu-dialog .cu-list .cu-item {
		color: $color-text-grey;
		background-color: $color-bg-primary--light;


		.content {
			padding-left: 10upx;
		}
	}



	.bottom-popup.cu-modal {
		top: calc(100vh - #{$qp-title-height} - #{$qp-content-height});

	}



	.user-panel {
		background-color: $color-bg-primary--light;

		font-size: 30upx;

		color: $color-text-white;

		.title-bar {
			height: $qp-title-height;
			border-bottom: 1px solid $color-border-grey;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 20upx;
			padding-right: 20upx;
		}

		.form {
			height: $qp-content-height;

			display: flex;
			flex-direction: column;


			.form-inputs {

				.item {
					box-sizing: border-box;
					background-color: $color-bg-primary--light;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					padding: 15upx 10upx;

					.title {
						text-align: right;
						flex: 3;
					}

					.input {
						flex: 7;
						padding-left: 20upx;
						padding-right: 20upx;
						color: #000;
						text-align: left;
						background-color: $color-text-white;
						opacity: 0.9;
					}

					&.btns {
						justify-content: flex-end;
						border-bottom: 1px solid $color-border-grey;

						.cu-btn {
							background-color: $color-bg-primary--lighter;
							opacity: 0.9;

							color: $color-text-grey;

							&:active {
								box-shadow: 0 0 1px 1px $color-border-blue;

							}
						}
					}
				}

			}

		}

	}


	.color-success {
		color: green;
	}

	.color-fail {
		color: firebrick;
	}

	.qr-modal {

		color: $color-text-white;

		.form {
			border-top: 1upx solid $color-border-grey;
			border-bottom: 1upx solid $color-border-grey;
		}

		.cu-bar {
			background-color: $color-bg-primary--light;
		}

		.cu-btn {
			background-color: $color-bg-primary--lighter;
		}



		.item {
			background-color: $color-bg-primary--light;
			height: 80upx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin: 30upx 30upx;

			.text {
				flex: 3;
				text-align: right;
			}




			.input {

				margin: 30upx;

				flex: 7;
				height: 50upx;
				padding-left: 20upx;
				padding-right: 20upx;
				text-align: left;
				background-color: #ccc;
				color: $color-text-grey--dark;
				border: 1px solid $color-border-grey;
			}
		}

		.status-item {
			height: 40upx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			color: #ccc;
			font-size: 26upx;
			margin: 20upx 60upx;
		}
	}
</style>
